<template>
  <div class="login-container">
    <el-form :model="user" :rules="rules1" ref="ruleForm2" label-position="left" label-width="0px"
             class="demo-ruleForm login-page">
      <h3 class="title">广告位管理系统·注册</h3>
      <el-form-item prop="account">
        <el-input type="text" v-model="user.account" auto-complete="off" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="user.password" auto-complete="off" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="rePassword">
        <el-input type="password" v-model="user.rePassword" auto-complete="off" placeholder="请确认密码"></el-input>
      </el-form-item>
      <el-form-item prop="telephone">
        <el-input type="text" v-model="user.telephone" auto-complete="off" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item prop="address">
        <el-input type="text" v-model="user.address" auto-complete="off" placeholder="请输入常用地址"></el-input>
      </el-form-item>
      <el-form-item style="width:100%; text-align: right">
        <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm2')">
          注册
        </el-button>
      </el-form-item>
      <el-form-item user-login-other>
        <router-link style="font-size: 14px" :to="{path:'/login'}">
          <el-link :underline="false" type="primary">已有账号？登录</el-link>
        </router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import loginApi from '@/api/login/login'

export default {
  name: 'register',
  data: function () {
    // 密码验证
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.user.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    // 电话号码验证
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
        // 所以在前面加了一个+实现隐式转换
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    return {
      user: {
        account: '', // 用户账号
        password: '', // 密码
        rePassword: '', // 确认的密码
        telephone: '', // 电话号码
        address: '' // 位置
      },
      rules1: { // 表单验证规则
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
        ],
        rePassword: [
          {validator: validatePass, trigger: 'blur'}
        ],
        telephone: [
          {validator: checkPhone, trigger: 'blur'}
        ]
      },
      checked: true
    }
  },
  methods: {
    /**
     * 注册表单提交按钮点击事件，根据user对象给api来判断账号是否存在，如果账号存在则注册失败
     * 否则注册成功并跳转到登陆界面
     * @param formName
     */
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          loginApi.register(this.user).then(res => {
            if (res.message === 'account exits') {
              alert('此账号已存在,请重新注册')
            } else {
              this.$router.push('/login')
            }
          })
        } else {
          alert('填写的格式有误')
        }
      })
    }
  }
}
</script>

<style scoped>
  .login-container {
    width: 100%;
    height: 100%;
  }

  .login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

</style>
